<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/rental.css">
</head>
<body class="layui-layout-body">
<div id="rental-index" class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo"><img src="../img/common/logo.jpg" alt=""></div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<h1>魔力公寓</h1>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item"> <a href="javascript:;">{{userinfo.loginName}}<img src="../img/common/icon07.gif" class="layui-nav-img"></a>
				<dl class="layui-nav-child">
					<dd><a href="../staff/modify_password.html"><img src="../img/common/icon08.png" alt=""><span>修改密码</span></a></dd>
					<dd><a href="../staff/bank_card.html"><img src="../img/common/icon09.png" alt=""><span>银行卡信息</span></a></dd>
					<dd><a href="javascript:;" @click.stop="doLogout"><img src="../img/common/icon10.png" alt=""><span>安全退出</span></a></dd>
				</dl>
			</li>
		</ul>
	</div>
	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll"> 
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree"  lay-filter="test">
				<li class="layui-nav-item"><a href="../survey/index.html"><img src="../img/common/icon01.png" alt="">概况</a></li>
				<li class="layui-nav-item on"><a href="../rental/index.html"><img src="../img/common/icon02.png" alt="">租务</a></li>
				<li class="layui-nav-item"><a href="../financial_affairs/index.html"><img src="../img/common/icon03.png" alt="">财务</a></li>
				<li class="layui-nav-item"><a href="../reports/index.html"><img src="../img/common/icon04.png" alt="">报表</a></li>
				<li class="layui-nav-item"><a href="../separate_accounts/index.html"><img src="../img/common/icon05.png" alt="">分账</a></li>
				<li class="layui-nav-item"><a href="../staff/index.html"><img src="../img/common/icon06.png" alt="">员工</a></li>
			</ul>
		</div>
	</div>
	<div class="layui-body clearfix"> 
		<!-- 内容主体区域 -->
		<div class="leftContent">
			<p class="layui-title">小区列表</p>
			<div class="layui-add-listing"><a href="javascript:;" @click.prevent="show='add'">添加房源</a></div>
			<dl class="sort">
				<dt><a href="javascript:;" @click="filterHouse='all'" v-text="'全部房源('+allTotalHouse+')'"></a></dt>
				<dd v-for="h in houseSrcList">
					<a href="javascript:;" @click="filterHouse=h.houseSrcId" v-text="h.houseSrcName+'('+h.totalHouse+')'"></a>
				</dd>
				<!--<dd><a href="#">魔力小区1（8）</a></dd>
				<dd><a href="#">魔力小区2（8）</a></dd>-->
			</dl>
		</div>
		<div class="rightContent">
			<div class="layui-function">
				<dl class="layui-illustrate">
					<dt>全部</dt>
					<dd v-text="allTotalHouse">16</dd>
					<dt>已租</dt>
					<dd>{{roomLists|rent(0)}}</dd>
					<dt>空置</dt>
					<dd>{{roomLists|overview(0)}}</dd>
				</dl>
				<dl class="layui-illustrate">
					<dt>临近收租</dt>
					<dd>{{roomLists|overview(1)}}</dd>
					<dt>逾期未交</dt>
					<dd>{{roomLists|overview(2)}}</dd>
					<dt>即将到期</dt>
					<dd>{{roomLists|overview(3)}}</dd>
				</dl>
				<div class="layui-search">
					<input type="text" name="search" required lay-verify="required" placeholder="搜索：小区名，房间名，租客名，房东名，手机号" autocomplete="off" class="layui-input">
					<img src="../img/common/icon12.gif" alt=""></div>
			</div>
			<template v-for="h in rooms">
				<div class="layui-title">{{h.houseSrcName+'('+h.roomList.length+')'}}<a href="javascript:;" @click="openEdit(h)">编辑</a></div>
				<ul class="layui-room-list clearfix">
					<template v-for="r in h.roomList">
						<li @click.stop="openDetial(h,r)" class="liStyle" v-if="r.status==4 || r.status==1">
							<p class="room-number" v-text="r.roomName">房间001</p>
							<div class="textBox">
								<!--<p class="name">小东</p>-->
								<p class="cycle">收租：<span v-text="r.date">2018.04.14</span></p>
							</div>
							<div class="show show04">
								<p class="next_cycle" v-text="'下期收租：'+r.date">下期收租：2018.04.14</p>
							</div>
						</li>
						<li @click.stop="openDetial(h,r)" v-else-if="r.status==0">
							<p class="room-number" v-text="r.roomName">房间001</p>
							<div class="textBox">
								<p class="fettle" :value="r.date" v-text="'已空置'+(moment(new Date()).diff(moment(r.date), 'days'))+'天'">已空置1天</p>
							</div>
							<div class="show">
								<p class="vacant" v-text="'已空置'+(moment(new Date()).diff(moment(r.date), 'days'))+'天'">已空置1天</p>
								<div @click="openSignProtocol(h, r)" class="contract_btn">签约</div>
							</div>
						</li>
						<li @click.stop="openDetial(h,r)" class="liStyle" v-else-if="r.status==2">
							<p class="room-number" v-text="r.roomName">房间001</p>
							<div class="prompt02">
								<div class="bg"></div>
								<p>收</p>
							</div>
							<div class="textBox">
								<!--<p class="name">小东</p>-->
								<p class="cycle02">收租：<span v-text="r.date">2018.03.14</span></p>
							</div>
							<div class="show show02">
								<div class="prompt02">
									<div class="bg"></div>
									<p>收</p>
								</div>
								<p class="overdue" v-text="'已逾期'+(moment(new Date()).diff(moment(r.date), 'days'))+'天'">已逾期10天 </p>
								<div @click.prevent.stop="openUrgePayRent" class="urge_btn">催租</div>
							</div>
						</li>
						<li @click.stop="openDetial(h,r)" class="liStyle" v-else-if="r.status==3">
							<p class="room-number" v-text="r.roomName">房间001</p>
							<div class="prompt">
								<div class="bg"></div>
								<p>到</p>
							</div>
							<div class="textBox">
								<!--<p class="name">小东</p>-->
								<p class="cycle">收租：<span v-text="r.date">2018.04.14</span></p>
							</div>
							<div class="show show03">
								<p class="expire">还有<span v-text="(moment(r.date).diff(moment(new Date()), 'd'))">3</span>天到期</p>
								<div class="prompt">
									<div class="bg"></div>
									<p>到</p>
								</div>
							</div>
						</li>
					</template>
					<li class="special"><a href="javascript:;" @click.prevent="openAddRoom(h)"><img src="../img/common/add_img.gif" alt=""></a></li>
				</ul>
			</template>
			<div class="add-listing-box" v-show="show=='add'">
				<div class="close"><img @click="show=''" src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">添加房源</p>
				<form class="layui-form" action="">
					<dl>
						<dt>房源名称</dt>
						<dd>
							<input type="text" v-model.trim="houseSrc.houseSrcName" placeholder="请输入房源名称" autocomplete="off" class="layui-input">
						</dd>
						<dt>层数</dt>
						<dd>
							<input type="number" v-model.number="houseSrc.floor" placeholder="请输入层数" autocomplete="off" class="layui-input">
						</dd>
						<dt>每层房间数</dt>
						<dd>
							<input type="number" v-model.number="houseSrc.roomNum" placeholder="请输入每层房间数" autocomplete="off" class="layui-input">
						</dd>
						<dt>分账设置</dt>
						<dd>
							<table class="layui-table">
								<colgroup>
								<col width="16%">
								<col width="33%">
								<col width="51%">
								</colgroup>
								<thead>
									<tr>
										<th>房源费用</th>
										<th>分账模板</th>
										<th>模板详情</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="s in houseSrc.settings">
										<td v-text="s.name">房租</td>
										<td>
											<select v-model="s.modelId">
												<option value="">不分账</option>
												<option v-for="t in tempList" :value="t.tempId" v-text="t.tempName"></option>
											</select>
										</td>
										<td></td>
									</tr>
								</tbody>
							</table>
							<p class="notes">没有合适的分账模板？可稍后到”分账” 中添加。</p>
						</dd>
					</dl>
					<div class="submit">
						<button @click.prevent="addHouseSrc" class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
					</div>
				</form>
			</div>
			<div class="edit-listing-box" v-show="show=='edit'">
				<div class="close"><img @click="show=''" src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">编辑房源</p>
				<form class="layui-form" action="">
					<dl>
						<dt>房源名称</dt>
						<dd>
							<input type="text" v-model.trim="houseSrc.houseName" placeholder="茉莉公寓" autocomplete="off" class="layui-input">
						</dd>
						<dt>分账设置</dt>
						<dd>
							<table class="layui-table">
								<colgroup>
								<col width="16%">
								<col width="33%">
								<col width="51%">
								</colgroup>
								<thead>
									<tr>
										<th>房源费用</th>
										<th>分账模板</th>
										<th>模板详情</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="s in houseSrc.settings">
										<td v-text="s.name">房租</td>
										<td>
											<select v-model="s.tempId">
												<option>不分账</option>
												<option v-for="t in tempList" :value="t.tempId" v-text="t.tempName"></option>
											</select>
										</td>
										<td>
											<p>

											</p>
										</td>
									</tr>
								</tbody>
							</table>
							<p class="notes">没有合适的分账模板？可稍后到”分账” 中添加。</p>
						</dd>
					</dl>
					<div class="submit">
						<button @click.prevent="eidtHouseSrc" class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
					</div>
				</form>
			</div>
			<div class="add-room-box" v-show="show=='addRoom'">
				<div class="close"><img @click="show=''" src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">添加房间</p>
				<form class="layui-form" action="">
					<dl class="community-name clearfix">
						<dt>小区名称</dt>
						<dd v-text="chooseHouse.houseSrcName+'('+chooseHouse.roomList.length+')'">魔力小区2（8）</dd>
					</dl>
					<dl class="room-name clearfix">
						<dt>房间名称</dt>
						<dd>
							<input v-model.trim="room.roomName" type="text" placeholder="请输入房间名称" autocomplete="off" class="layui-input">
						</dd>
					</dl>
					<div class="submit">
						<button @click.prevent="addRoom" class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
					</div>
				</form>
			</div>
			<div class="remind-box" v-show="show=='remind'">
				<div class="close"><img @click="show=''" src="../img/common/close_img.gif" alt=""></div>
				<p>已发送交租通知到租客微信。</p>
				<form class="layui-form" action="">
					<div class="submit">
						<button @click.prevent="show=''" class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
					</div>
				</form>
			</div>
			<div class="contract-box" v-show="show=='contract'">
				<div class="close"><img @click="show=''" src="../img/common/close_img.gif" alt=""></div>
				<div class="scroll-box">
					<form class="layui-form" action="">
						<p class="headline">房间信息</p>
						<ul class="room-information clearfix">
							<li v-text="'小区名：'+signProtocol.houseName">小区名：魔力小区1</li>
							<li v-text="'房间号：'+signProtocol.roomName">房间号：房间101</li>
						</ul>
						<p class="headline">基本信息</p>
						<div class="basic-information">
							<ul class="basic-list clearfix">
								<li>
									<p class="label-text necessary">承租人姓名</p>
									<input type="text" v-model.trim="signProtocol.renterName" placeholder="输入租客姓名" autocomplete="off" class="layui-input">
								</li>
								<li>
									<p class="label-text necessary">手机号码</p>
									<input type="number" v-model.number="signProtocol.phone" placeholder="手机号，11位数字，选填" autocomplete="off" class="layui-input">
								</li>
							</ul>
							<p class="label-text">身份证号码</p>
							<div class="identification">
								<input type="text" v-model.trim="signProtocol.idNumber" placeholder="证件号码，选填" autocomplete="off" class="layui-input">
							</div>
							<p class="label-text">身份证照片<span>（JPEG，PNG，单张5M以内；0/3）</span></p>
							<ul class="identification-upload clearfix">
								<li>
									<button type="button" class="layui-btn" id="upload1">+图片</button>
								</li>
								<li>
									<button type="button" class="layui-btn" id="upload2">+图片</button>
								</li>
								<li>
									<button type="button" class="layui-btn" id="upload3">+图片</button>
								</li>
							</ul>
						</div>
						<p class="headline">租赁信息<span class="tips">（租客支付后不可修改租赁信息）</span></p>
						<div class="leasing-information">
							<ul class="leasing-list clearfix">
								<li class="liStyle">
									<p class="label-text necessary">租赁时间<span class="error">租赁时间未选择</span></p>
									<div class="time layui-inline"><a href="javascript:;">一个月</a><a href="javascript:;">三个月</a><a href="javascript:;">半年</a><a href="#">一年</a><a href="javascript:;">两年<img src="../img/common/icon17.png" alt=""></a></div>
									<div class="layui-date layui-inline">
										<input type="text" readonly v-model.trim="signProtocol.startDate" id="startDate">
										一
										<input type="text" readonly v-model.trim="signProtocol.endDate" id="endDate">
									</div>
								</li>
								<li>
									<p class="label-text necessary">租金</p>
									<div class="inner">
										<input type="number" v-model.number="signProtocol.rental" placeholder="" autocomplete="off" class="layui-input">
										<span>元/月</span></div>
								</li>
								<li>
									<p class="label-text necessary">押金</p>
									<div class="inner">
										<input type="number" v-model.number="signProtocol.deposit" placeholder="" autocomplete="off" class="layui-input">
										<span>元</span></div>
								</li>
								<li class="liStyle">
									<p class="label-text necessary">支付方式<span class="error">支付方式未选择</span></p>
									<div class="payment-method layui-inline"><a href="javascript:;" @click="signProtocol.payWay=1">月租<img v-if="signProtocol.payWay==1" src="../img/common/icon17.png" alt=""></a></a><a href="javascript:;" @click="signProtocol.payWay=3">季付<img v-if="signProtocol.payWay==3" src="../img/common/icon17.png" alt=""></a></a><a href="javascript:;" @click="signProtocol.payWay=6">半年付<img v-if="signProtocol.payWay==6" src="../img/common/icon17.png" alt=""></a></a><a href="javascript:;" @click="signProtocol.payWay=12">年付<img v-if="signProtocol.payWay==12" src="../img/common/icon17.png" alt=""></a></a><a href="javascript:;">其他<img v-if="signProtocol.payWay!=1&&signProtocol.payWay!=3&&signProtocol.payWay!=6&&signProtocol.payWay!=12" src="../img/common/icon17.png" alt=""></a></div>
									<div class="layui-inline">
										<div class="inner inner02">
											<input type="number" v-model.number="signProtocol.payWay" placeholder="" autocomplete="off" class="layui-input">
											<span>个月</span></div>
									</div>
								</li>
								<li>
									<p class="label-text necessary">收租方式</p>
									<div class="layui-inline">
										<select v-model="signProtocol.rentWay.way">
											<option value="0" selected>提前日收租</option>
											<option value="1">固定交租日</option>
										</select>
									</div>
									<div class="layui-inline">
										<div class="inner">
											<input type="number" v-model.number="signProtocol.rentWay.day" placeholder="" autocomplete="off" class="layui-input">
											<span>天</span></div>
									</div>
								</li>
								<li>
									<p class="label-text necessary">账单周期</p>
									<div class="layui-block">
										<input type="radio" name="bill-cycle" value="按自然月（每月1号-月末日）" title="按自然月（每月1号-月末日）">
									</div>
									<div class="layui-block">
										<input type="radio" name="bill-cycle" value="按实际周期" title="按实际周期">
									</div>
								</li>
							</ul>
						</div>
						<div class="leasing-information-unchangeable">
							<table class="layui-table">
								<colgroup>
								<col width="27%">
								<col width="73%">
								</colgroup>
								<tbody>
									<tr>
										<th>租赁时间</th>
										<td>2018.03.19到2019.03.18</td>
									</tr>
									<tr>
										<th>租金</th>
										<td>1000元/月</td>
									</tr>
									<tr>
										<th>押金</th>
										<td>1000元/月</td>
									</tr>
									<tr>
										<th>支付方式</th>
										<td>季付</td>
									</tr>
									<tr>
										<th>提前支付天数</th>
										<td>0天</td>
									</tr>
									<tr>
										<th>账单周期</th>
										<td>按自然月（每月1号-月末日）</td>
									</tr>
								</tbody>
							</table>
						</div>
						<p class="headline">杂物信息</p>
						<div class="debris-information">
							<ul class="debris-list clearfix">
								<li>
									<input type="checkbox" name="water-fee" title="水费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="electricity-fee" title="电费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="gas-costs" title="燃气费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="property-costs" title="物业费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="service-fee" title="服务费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="cleaning-fee" title="保洁费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="tv-fee" title="电视费" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="broadband-fee" title="宽带" lay-skin="primary">
								</li>
								<li>
									<input type="checkbox" name="other-fee" title="其他" lay-skin="primary">
								</li>
							</ul>
							<p class="sub-title">水费</p>
							<ul class="debris-detail clearfix">
								<li>
									<p class="label-text">收费类型</p>
									<div class="layui-inline">
										<select name="water-meter-reading-fees" lay-verify="required">
											<option value="0" selected>抄表收费</option>
											<option value="1">固定每月收费</option>
										</select>
									</div>
								</li>
								<li>
									<p class="label-text">单价</p>
									<div class="inner">
										<input type="text" name="water-unit-price" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
										<span>元/吨</span></div>
								</li>
								<li>
									<p class="label-text">当前读数</p>
									<input type="text" name="current-reading" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								</li>
								<li>
									<p class="label-text">当前读数抄表日期</p>
									<div class="layui-date">
										<input type="text" id="date3">
									</div>
								</li>
							</ul>
							<p class="sub-title">物业费</p>
							<ul class="debris-detail clearfix">
								<li>
									<p class="label-text">收费类型</p>
									<div class="layui-inline">
										<select name="property-meter-reading-fees" lay-verify="required">
											<option value="0" selected>抄表收费</option>
											<option value="1">固定每月收费</option>
										</select>
									</div>
								</li>
								<li>
									<p class="label-text">费用金额</p>
									<div class="inner">
										<input type="text" name="property-price" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
										<span>元/月</span></div>
								</li>
							</ul>
						</div>
						<div class="debris-information-unchangeable">
							<table class="layui-table">
								<colgroup>
								<col width="27%">
								<col width="32%">
								<col width="41%">
								</colgroup>
								<tbody>
									<tr>
										<th>水费</th>
										<td>按表收费<br>
											抄表时间：2018.03.02</td>
										<td>费用单价：1元 /吨<br>
											抄表读数：12</td>
									</tr>
									<tr>
										<th>物业费</th>
										<td>固定每月收费</td>
										<td>1000元/月</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="submit">
							<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
						</div>
					</form>
				</div>
			</div>
			<div class="detail-box" v-show="show=='detail'">
				<div class="close"><img @click="show=''" src="../img/common/close_img.gif" alt=""></div>
				<p class="detail-title" v-text="detail.house.houseSrcName+'-'+detail.room.roomName">魔力小区2-房间101</p>
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li class="layui-this">租房合同</li>
						<li>租客账单</li>
						<li>房间详情</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div class="nothing-box">
								<div class="no-contract">
									<div class="visual"><img src="../img/common/img01.jpg" alt=""></div>
									<p>暂无生效合同，<a href="#">去录入租客合同</a></p>
								</div>
								<div class="history">
									<p class="headline">历史合同</p>
									<table class="layui-table">
										<colgroup>
										<col width="27%">
										<col width="32%">
										<col width="41%">
										</colgroup>
										<tbody>
											<tr>
												<td>李大同</td>
												<td>类型：退租</td>
												<td>退租时间：2018.03.06 </td>
											</tr>
											<tr>
												<td>张大东</td>
												<td>类型：失效</td>
												<td>退租时间：2018.03.06 </td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="purview">
								<p>您没有权限查看此页面</p>
							</div>
							<div class="content">
								<div class="layui-tab layui-tab-brief layui-tab-inner" lay-filter="docDemoTabBrief">
									<ul class="layui-tab-title">
										<li class="layui-this">编辑</li>
										<li>退租</li>
									</ul>
									<div class="layui-tab-content">
										<div class="layui-tab-item layui-show">
											<p class="headline">基本信息</p>
											<table class="layui-table">
												<colgroup>
												<col width="27%">
												<col width="73%">
												</colgroup>
												<tbody>
													<tr>
														<th>承租人姓名</th>
														<td v-text="currentProtocol.renterName">Reggie</td>
													</tr>
													<tr>
														<th>手机号码</th>
														<td v-text="currentProtocol.phone">135646445454</td>
													</tr>
													<tr>
														<th>身份证号码</th>
														<td v-text="currentProtocol.idNumber">441283197902345678</td>
													</tr>
													<tr>
														<th>身份证照片</th>
														<td><img v-for="(pic, i) in currentProtocol.idPic" :key="i" :src="pic" alt=""></td>
													</tr>
												</tbody>
											</table>
											<p class="headline">租赁信息</p>
											<table class="layui-table">
												<colgroup>
												<col width="27%">
												<col width="73%">
												</colgroup>
												<tbody>
													<tr>
														<th>租赁时间</th>
														<td v-text="moment(currentProtocol.startDate).format('YYYY.MM.DD')+'到'+moment(currentProtocol.endDate).format('YYYY.MM.DD')">2018.03.19到2019.03.18</td>
													</tr>
													<tr>
														<th>租金</th>
														<td v-text="currentProtocol.rental">1000元/月</td>
													</tr>
													<tr>
														<th>押金</th>
														<td v-text="currentProtocol.deposit">1000元/月</td>
													</tr>
													<tr>
														<th>支付方式</th>
														<td v-text="currentProtocol.payWay">季付</td>
													</tr>
													<tr>
														<th>提前支付天数</th>
														<td v-text="currentProtocol.rentWay.way">0天</td>
													</tr>
													<tr>
														<th>账单周期</th>
														<td v-text="currentProtocol.billPeriod">按自然月（每月1号-月末日）</td>
													</tr>
												</tbody>
											</table>
											<p class="headline">杂费信息</p>
											<table class="layui-table">
												<colgroup>
												<col width="27%">
												<col width="32%">
												<col width="41%">
												</colgroup>
												<tbody>
													<tr>
														<th>水费</th>
														<td>按表收费<br>
															抄表时间：2018.03.02</td>
														<td>费用单价：1元 /吨<br>
															抄表读数：12</td>
													</tr>
													<tr>
														<th>物业费</th>
														<td>固定每月收费</td>
														<td>1000元/月</td>
													</tr>
												</tbody>
											</table>
											<p class="headline">历史合同</p>
											<table class="layui-table">
												<colgroup>
												<col width="27%">
												<col width="32%">
												<col width="41%">
												</colgroup>
												<tbody>
													<tr v-for="(p, i) in historyProtocol" :key="i">
														<th v-text="p.renterName">李大同</th>
														<td v-text="'类型：'+(p.type==0?'退租':'失效')">类型：退租</td>
														<td v-text="'退租时间：'+p.date">退租时间：2018.03.06</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="layui-tab-item">
											<p class="headline">退租</p>
											<form class="layui-form" action="">
												<table class="layui-table">
													<colgroup>
													<col width="27%">
													<col width="73%">
													</colgroup>
													<tbody>
														<tr>
															<th>合同租金</th>
															<td v-text="currentProtocol.rental+'元'">1000.00元</td>
														</tr>
														<tr>
															<th>合同押金</th>
															<td v-text="currentProtocol.deposit">1000.00元</td>
														</tr>
														<tr>
															<th>合同租赁时间</th>
															<td v-text="moment(currentProtocol.startDate).format('YYYY.MM.DD')+'-'+moment(currentProtocol.endDate).format('YYYY.MM.DD')">2018.03.19 — 2019.03.18</td>
														</tr>
														<tr>
															<th>退租时间</th>
															<td><div class="layui-date">
																	<input type="text" v-model.trim="refund.date" id="date">
																</div></td>
														</tr>
														<tr>
															<th class="vTop">退租说明</th>
															<td><textarea v-model.trim="refund.detail" placeholder="" class="layui-textarea"></textarea>
																<p class="note"><span></span>100字以内</p></td>
														</tr>
														<tr>
															<th>费用处理</th>
															<td><dl class="retired-explain">
																	<dt>应退</dt>
																	<dd>
																		<input type="number" v-model.number="refund.money" placeholder="0" autocomplete="off" class="layui-input">
																		<span>元</span></dd>
																</dl>
																<p class="error layui-hide">请输入有效数值,</p></td>
														</tr>
													</tbody>
												</table>
												<ul class="submit">
													<li><a href="#" class="layui-btn">返回</a></li>
													<li>
														<button @click.prevent="refundRent" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">确定</button>
													</li>
												</ul>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-tab-item">
							<div class="nothing-box">
								<div class="no-contract">
									<div class="visual"><img src="../img/common/img02.jpg" alt=""></div>
									<p>房间未出租，暂无账单</p>
								</div>
							</div>
							<div class="purview">
								<p>您没有权限查看此页面</p>
							</div>
							<div class="content">
								<p class="headline">待处理账单</p>
								<table class="layui-table layui-table-bill">
									<colgroup>
									<col width="19%">
									<col width="13%">
									<col width="14%">
									<col width="14%">
									<col width="40%">
									</colgroup>
									<thead>
										<tr>
											<th>账单周期</th>
											<th>账单状态</th>
											<th>账单金额</th>
											<th>应收租日期</th>
											<th class="taCenter">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-if="bills.pending">
											<td v-text="moment(bills.pending.startDate).format('YYYY.MM.DD')+'-'+moment(bills.pending.endDate).format('YYYY.MM.DD')">2018.03.16-2018.04.15</td>
											<td><span v-text="bills.pending.status">待支付</span></td>
											<td v-text="bills.pending.money+'元'">1000.00元</td>
											<td v-text="moment(bills.pending.date).format('YYYY.MM.DD')">2018.03.16</td>
											<td class="taCenter"><a href="javascript:;" @click.prevent="getBillDetail(bills.pending.billId)" class="layui-btn">查看</a><a href="javascript:;" @click.prevent="urgePayRent(bills.renterId)" class="layui-btn">催租</a><a href="javascript:;" @click.prevent="openDelBill(bills.pending)"  class="layui-btn">删除</a></td>
										</tr>
									</tbody>
								</table>
								<p class="headline">未来账单</p>
								<table class="layui-table layui-table-bill">
									<colgroup>
									<col width="23%">
									<col width="20%">
									<col width="17%">
									<col width="40%">
									</colgroup>
									<thead>
										<tr>
											<th>账单周期</th>
											<th>账单金额</th>
											<th>应收租日期</th>
											<th class="taCenter">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(f, i) in bills.future" :key="i">
											<td v-text="moment(f.startDate).format('YYYY.MM.DD')+'-'+moment(f.endDate).format('YYYY.MM.DD')">2018.04.16-2018.05.15</td>
											<td v-text="f.money+'元'">1000.00元</td>
											<td v-text="moment(f.date).format('YYYY.MM.DD')">2018.04.16</td>
											<td class="taCenter"><a href="javascript:;" @click.prevent="getBillDetail(f.billId)" class="layui-btn">查看</a><a href="javascript:;" @click.prevent="urgePayRent(bills.renterId)" class="layui-btn">催租</a><a href="javascript:;" @click.prevent="openDelBill(f)"  class="layui-btn">删除</a></td>
										</tr>
									</tbody>
								</table>
								<p class="headline">已处理账单</p>
								<table class="layui-table layui-table-bill">
									<colgroup>
									<col width="23%">
									<col width="20%">
									<col width="17%">
									<col width="40%">
									</colgroup>
									<thead>
										<tr>
											<th>账单周期</th>
											<th>账单金额</th>
											<th>应收租日期</th>
											<th class="taCenter">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(h,i) in bills.history" :key="i">
											<td v-text="moment(h.startDate).format('YYYY.MM.DD')+'-'+moment(h.endDate).format('YYYY.MM.DD')">2018.04.16-2018.05.15</td>
											<td v-text="h.money+'元'">1000.00元</td>
											<td v-text="moment(h.date).format('YYYY.MM.DD')">2018.04.16</td>
											<td class="taCenter"><a href="javascript:;" @click.prevent="getBillDetail(h.billId)" class="layui-btn">查看</a><a href="javascript:;" @click.prevent="openDelBill(h)" class="layui-btn">删除</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="layui-tab-item">
							<div class="purview">
								<p>您没有权限查看此页面</p>
							</div>
							<div class="content">
								<p class="headline">房间信息</p>
								<table class="layui-table layui-table-room">
									<colgroup>
									<col width="15%">
									<col width="51%">
									<col width="34%">
									</colgroup>
									<tbody>
										<tr>
											<th>房间名称</th>
											<td v-text="detail.room.roomName">房间001</td>
											<td><a href="#" class="layui-btn">编辑</a><a href="#" class="layui-btn">删除</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="withdraw-failed" v-if="show=='refundFailed'">
				<div class="close"><img src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">退租失败</p>
				<p class="message">请到财务-退款处理完成退款处理。</p>
				<ul class="submit">
					<li>
						<button @click.prevent="show=''" class="layui-btn layui-btn-primary layui-btn-primary02" lay-submit lay-filter="formDemo">晚点处理</button>
					</li>
					<li>
						<button @click.prevnt="window.location.href='../financial_affairs/refundment.html'" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">现在处理</button>
					</li>
				</ul>
			</div>
			<div class="withdraw-success" v-if="show=='refundSuccess'">
				<div class="close"><img src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">退租成功</p>
				<p class="message">已生成账单发送给租客。</p>
				<div class="submit">
					<li>
						<button @click.prevnt="show=''" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">确定</button>
					</li>
				</div>
			</div>
			<div class="check-bills" v-if="showBillDetail">
				<div class="close"><img @click="showBillDetail=!showBillDetail" src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">查看账单</p>
				<dl>
					<dt>账单周期</dt>
					<dd v-text="moment(billDetail.startDate).format('YYYY.MM.DD')+'-'+moment(billDetail.endDate).format('YYYY.MM.DD')">2018.03.16-2018.04.15</dd>
					<dt>应收租日期</dt>
					<dd v-text="moment(billDetail.date).format('YYYY.MM.DD')">2018.03.16</dd>
					<dt>详细账单</dt>
					<dd>
						<table class="layui-table">
							<colgroup>
							<col width="15%">
							<col width="27%">
							<col width="58%">
							</colgroup>
							<thead>
								<tr>
									<th>费用名称</th>
									<th>费用金额（元）</th>
									<th>费用详情</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="i in billDetail.info">
									<td v-text="i.code">月租</td>
									<td><span v-text="i.money">1000.00</span></td>
									<td>
										<ul v-if="i.detail != null" class="clearfix">
											<li v-text="'上次读数：'+i.detail.lastNumber">上次读数：1000</li>
											<li v-text="'抄表日期：'+moment(i.detail.lastDate).format('YYYY.MM.DD')">抄表日期：2018.03.01</li>
											<li v-text="'上次读数：'+i.detail.thisNumber">上次读数：1050</li>
											<li v-text="'抄表日期：'+moment(i.detail.thisDate).format('YYYY.MM.DD')">抄表日期：2018.03.31</li>
											<li v-text="'电费单价：'+i.detail.price+'元／度'">电费单价：0.40元／度</li>
										</ul>
									</td>
								</tr>
								<tr>
									<td>费用总计</td>
									<td><span v-text="billDetail.total">1020.00</span></td>
									<td></td>
								</tr>
							</tbody>
						</table>
					</dd>
				</dl>
			</div>
			<div class="delete-bill" v-if="showDeleteBill">
				<div class="close"><img @click="showDeleteBill=!showDeleteBill" src="../img/common/close_img.gif" alt=""></div>
				<p class="message">确定删除账单？删除后无法恢复。</p>
				<ul class="submit clearfix">
					<li>
						<button @click.prevent="showDeleteBill=!showDeleteBill" class="layui-btn layui-btn-primary layui-btn-primary02" lay-submit lay-filter="formDemo">取消</button>
					</li>
					<li>
						<button @click.prevent="alert('未找到删除账单接口')" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">确定</button>
					</li>
				</ul>
			</div>
			<div class="urge-box">
				<div class="close"><img src="../img/common/close_img.gif" alt=""></div>
				<p class="message">确定发送微信催单通知给租客？</p>
				<ul class="submit clearfix">
					<li>
						<button class="layui-btn layui-btn-primary layui-btn-primary02" lay-submit lay-filter="formDemo">取消</button>
					</li>
					<li>
						<button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">确定</button>
					</li>
				</ul>
			</div>
			<div class="edit-room">
				<div class="close"><img src="../img/common/close_img.gif" alt=""></div>
				<p class="headline">编辑房间</p>
				<form class="layui-form" action="">
					<dl class="clearfix">
						<dt>房间名称</dt>
						<dd>
							<input type="text" name="edit-room-name" required  lay-verify="required" placeholder="房间012" autocomplete="off" class="layui-input">
						</dd>
					</dl>
					<div class="submit">
						<button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
					</div>
				</form>
			</div>
			<div class="room-details-delete">
				<div class="close"><img src="../img/common/close_img.gif" alt=""></div>
				<p class="message">删除房间后将丢失历史租约，确定删除此房间？</p>
				<p class="message-failure">房间仍在出租，请退租后再删除房间。</p>
				<div class="submit">
					<button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">确定</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/moment.min.js"></script>
<script src="../js/storejson2.min.js"></script>
<script src="../js/mock.js"></script>
<script src="../js/mockdata.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/rental/index.js"></script>
<!--<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#date1' //指定元素
  });
  
   laydate.render({
    elem: '#date2' //指定元素
  }); 
  
   laydate.render({
    elem: '#date3' //指定元素
  }); 
  
    laydate.render({
    elem: '#date4' //指定元素
  }); 
   
  
});


</script>-->
</body>
</html>